<template>
    <div class="app-container home">
        <panel-group @handleSetLineChartData="handleSetLineChartData" />





        <!-- <el-divider /> -->


        <el-row :gutter="20">

            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <PhoneBook></PhoneBook>      
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>代办</span>
                        </div>
                    </template>
                    <div class="body">
                        <Taskbar></Taskbar>
                    </div>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <Notice></Notice>
            </el-col>
        </el-row>


        <el-row :gutter="20" style="padding-top: 20px;">
            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <EChartsSpend></EChartsSpend>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <ECartsSales></ECartsSales>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <ECartsSalesDistribution></ECartsSalesDistribution>
                </el-card>
            </el-col>
        </el-row>





    </div>
</template>

<script setup name="Index">
// import TodoList from './components/TodoList'
import PanelGroup from './components/PanelGroup'
import Taskbar from './components/Taskbar.vue'
import EChartsSpend from './components/EChartsSpend.vue'
import ECartsSales from './components/ECartsSales.vue'
import ECartsSalesDistribution from './components/ECartsSalesDistribution.vue'
import PhoneBook from './components/PhoneBook.vue'
import Notice from './components/Notice.vue'

const version = ref('3.6.4')

function goTarget(url) {
    window.open(url, '__blank')
}

const handleSetLineChartData = (type) => {
    console.log(type)
}








</script>

<style scoped lang="scss">
.home {
    // background-color: rgb(235, 237, 240);

    blockquote {
        padding: 10px 20px;
        margin: 0 0 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
    }

    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }

    .col-item {
        margin-bottom: 20px;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
        list-style-type: none;
    }

    h4 {
        margin-top: 0px;
    }

    h2 {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 100;
    }

    p {
        margin-top: 10px;

        b {
            font-weight: 700;
        }
    }

    .update-log {
        ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
            padding-inline-start: 40px;
        }
    }
}
</style>
